/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

/* stylelint-disable selector-max-type */
@use '../internal/styles' as styles;
@use '../internal/styles/tokens' as awsui;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;

$separator-color: awsui.$color-border-tabs-divider;
$label-horizontal-spacing: awsui.$space-xs;

.tabs-header {
  margin-block: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
  display: flex;
  flex-wrap: wrap;
}

.tab-header-scroll-container {
  display: flex;
  flex-grow: 1;
  max-inline-size: 100%;
}

.tabs-header-list {
  margin-block: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  position: relative;
  inline-size: 100%;
  scroll-snap-type: inline proximity;
  // do not use pointer-events none because it disables scroll by sliding

  // Hide scrollbar in all browsers
  scrollbar-width: none; /* Firefox */
  &::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }
}

.pagination-button {
  margin-block: awsui.$space-scaled-s;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: awsui.$space-xxs;
  display: flex;
  &-left {
    border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-control-disabled;
    &-scrollable {
      z-index: 1;
      box-shadow:
        5px 0px 4px -3px awsui.$color-border-tabs-shadow,
        1px 0px 0px 0px awsui.$color-border-tabs-shadow;
    }
  }
  &-right {
    border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-control-disabled;
    &-scrollable {
      z-index: 1;
      box-shadow:
        -5px 0px 4px -3px awsui.$color-border-tabs-shadow,
        -1px 0px 0px 0 awsui.$color-border-tabs-shadow;
    }
  }
}

.actions-container {
  flex-shrink: 0;
  align-self: center;
  padding-block: awsui.$space-xs;
  padding-inline: awsui.$space-xs;
  margin-inline-start: auto;
}

.tabs-tab {
  // Clear list formatting that comes with list item
  list-style: none;
  padding-block: 0;
  padding-inline: 0;

  flex-shrink: 0;
  display: flex;
  max-inline-size: calc(90% - awsui.$space-l);
  scroll-snap-align: start;
}

.tabs-tab-label {
  display: flex;
  align-items: center;
  padding-inline: $label-horizontal-spacing;
  padding-block: awsui.$space-scaled-2x-xxs;
  text-align: start;
  position: relative;

  @include styles.text-wrapping;
}

.tabs-tab-header-container {
  position: relative;

  border-block: awsui.$border-divider-section-width solid transparent;
  border-inline: awsui.$border-divider-section-width solid transparent;

  padding-inline: $label-horizontal-spacing;
  display: flex;
  align-items: stretch;

  &,
  & > button {
    background-color: transparent;
  }

  & > .tabs-tab-dismiss,
  & > .tabs-tab-action {
    position: relative;
    display: flex;
    align-items: center;
  }

  &.refresh > span:first-of-type {
    margin-inline-start: calc(-1 * awsui.$space-scaled-xs);
  }
}

.tabs-tab-header-container:not(.tabs-tab-disabled) {
  // This is the underline for the currently selected tab.
  &:after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inline-size: calc(100% - 1px);
    inset-block-end: calc(-1 * #{awsui.$border-divider-section-width});
    block-size: awsui.$border-active-width;
    border-start-start-radius: awsui.$border-radius-tabs-focus-ring;
    border-start-end-radius: awsui.$border-radius-tabs-focus-ring;
    border-end-start-radius: awsui.$border-radius-tabs-focus-ring;
    border-end-end-radius: awsui.$border-radius-tabs-focus-ring;
    background: awsui.$color-border-tabs-underline;
    opacity: 0;
  }

  &.refresh {
    &:after {
      @include styles.with-motion {
        transition: opacity awsui.$motion-duration-refresh-only-medium awsui.$motion-easing-refresh-only-c;
      }
    }
  }
}

.tabs-tab:not(:last-child) {
  & > .tabs-tab-header-container {
    margin-inline-end: calc(-1 * #{awsui.$border-divider-section-width});
    // This is the divider for the tab
    &:before {
      content: '';
      position: absolute;
      border-inline-end: awsui.$border-divider-section-width solid $separator-color;
      inset: awsui.$space-scaled-s 0;
      opacity: 1;
    }

    &.refresh:before {
      inset: calc(#{awsui.$space-static-s} - #{awsui.$border-active-width}) 0;
    }
  }
}

.tabs-tab-link {
  position: relative;
  display: flex;
  align-items: stretch;
  text-decoration: none;
  cursor: pointer;
  padding-block-start: calc(#{awsui.$space-scaled-s} - 2px);
  padding-block-end: calc(#{awsui.$space-scaled-s} - 1px);

  padding-inline: 0;
  margin-block-start: 1px;
  border-block: awsui.$border-divider-section-width solid transparent;
  border-inline: awsui.$border-divider-section-width solid transparent;

  font-size: awsui.$font-tabs-size;
  line-height: awsui.$font-tabs-line-height;
  font-weight: awsui.$font-wayfinding-link-active-weight;
  color: awsui.$color-text-interactive-default;

  padding-inline-start: calc(#{awsui.$space-xxs} - 1px);
  padding-inline-end: awsui.$space-xxs;
  @include styles.font-smoothing;

  &.refresh {
    padding-block-start: calc(awsui.$space-static-xs - 1px);
    padding-block-end: calc(awsui.$space-static-xs - 1px);

    margin-block-start: 0;
  }

  &:hover {
    color: awsui.$color-text-accent;
  }

  &:focus {
    outline: none;
  }

  @include focus-visible.when-visible {
    z-index: 1;
    border-inline-end-color: transparent;
    @include styles.focus-highlight(awsui.$space-tabs-focus-outline-gutter);
  }
}

// Remediate focus shadow
.tabs-tab:first-child {
  margin-inline-start: 1px;
  scroll-margin-inline-start: 1px;
  & > .tabs-tab-header-container {
    padding-inline-start: calc(#{$label-horizontal-spacing} - 1px);
  }
}

// Remediate focus shadow
.tabs-tab:last-child {
  margin-inline-end: 1px;
  scroll-margin-inline-end: 1px;
  & > .tabs-tab-header-container {
    padding-inline-end: calc(#{$label-horizontal-spacing} - 1px);
  }
}

.tabs-tab-disabled {
  &,
  &:hover {
    cursor: default;
    color: awsui.$color-text-interactive-disabled;
    font-weight: awsui.$font-tabs-disabled-weight;
  }
}

.tabs-tab-active:not(.tabs-tab-disabled) {
  color: awsui.$color-text-accent;
  &:after {
    opacity: 1;
  }
}

.tabs-header-with-divider {
  border-block-end: awsui.$border-divider-section-width solid $separator-color;
}

.tabs-tab-focusable {
  /* used to manage focusable logic */
}
